<!-- el-table组件 -->
<template>
  <el-table
    v-bind="$attrs"
    style="width: 100%"
    v-on="$listeners"
    :key="key"
    ref="tableFilter"
    height="auto"
  >
    <template slot="empty">
      <slot name="empty"><el-empty /></slot>
    </template>
    <slot></slot>
  </el-table>
</template>

<script>
export default {
  name: "el-table-filter",

  data() {
    return {
      key: false
    };
  },
  watch: {
    "$attrs.columnsArr": {
      handler(val) {
        if (val) {
          this.changeColumnsSort(val);
        } else {
          console.error("el-table-filter组件需要传columnsArr");
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {
    changeColumnsSort(columnsArr) {
      // console.log(this.$slots, "$slots1");
      const columns = columnsArr.map(node => node.prop);
      // console.log(columns);
      let totalColumns = [];
      totalColumns = columns.map(propname =>
        this.$slots.default.find(vnode => vnode.data.attrs.prop === propname)
      );

      this.$slots.default.forEach((vnode, index) => {
        if (!vnode.data.attrs.prop) {
          if (index === 0) {
            totalColumns.unshift(vnode);
            return;
          }
          if (index >= totalColumns.length) {
            totalColumns.push(vnode);
            return;
          }
          totalColumns.splice(index - 1, 0, vnode);
        }
      });

      this.$slots.default = totalColumns;
      // console.log(this.$slots, "$slots2");
      this.key = !this.key;
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss" scoped></style>
